<template>
  <nav class="nav-bar row">
    <div class="col">
      <router-link to="/">
        <i class="icon icon-home"></i>
        <span>首页</span>
      </router-link>
    </div>
    <div class="col">
      <router-link to="/">
        <i class="icon icon-mall"></i>
        <span>玩具城</span>
      </router-link>
    </div>
    <div class="col">
      <router-link to="/">
        <i class="icon icon-order"></i>
        <span>订单</span>
      </router-link>
    </div>
    <div class="col">
      <router-link to="/">
        <i class="icon icon-mine"></i>
        <span>我的</span>
      </router-link>
    </div>
  </nav>
</template>

<script>
export default {
  data() {
    return {
    };
  },
};
</script>

<style lang="less">
@import (reference) "../style/less/app.less";

.nav-bar {
  background: #fff;
  border-top: 1px solid @color_line;

  i.icon {
    display: block;
    margin: auto;
    background-size: cover;
    .size(1rem, 1rem);
  }

  .col {
    text-align: center;
    padding-top: .2rem;
    span {
      display: block;
      margin: .15rem 0;
      font-size: 0.6rem;
    }
  }

  i.icon-home {
    background-image: url('../assets/images/tab/home.png');
  }
  i.icon-mall {
    background-image: url('../assets/images/tab/mall.png');
  }
  i.icon-order {
    background-image: url('../assets/images/tab/order.png');
  }
  i.icon-mine {
    background-image: url('../assets/images/tab/mine.png');
  }
}
</style>
